<template>
  <div id="dswd-contactus-second">
    <div v-if="device==='desktop'" class="dswd-contactus-second">
      <div class="second-wrap">
        <div class="contactus-second-text">
          <div class="contactus-title">我要留言</div>
          <div class="contactus-en-title">Make a comment</div>
        </div>
        <div class="aboutus-second-content">
          <el-form ref="infoForm" label-width="70px" :model="form" :rules="rules">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
              <el-input v-model="form.mobile" />
            </el-form-item>
            <el-form-item label="公司" prop="company">
              <el-input v-model="form.company" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" />
            </el-form-item>
            <el-form-item label="内容" prop="content">
              <el-input v-model="form.content" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item label-width="0" class="text-center">
              <span class="leave-message-button" @click="onSubmit">提交留言</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dividing-line" />
    </div>
    <div v-if="device==='ipad'" class="dswd-p-contactus-second">
      <div class="second-wrap">
        <div class="contactus-second-text">
          <div class="contactus-title">我要留言</div>
          <div class="contactus-en-title">Make a comment</div>
        </div>
        <div class="aboutus-second-content">
          <el-form ref="infoForm" label-width="0" :model="form" :rules="rules">
            <el-form-item prop="name">
              <el-input v-model="form.name" placeholder="姓名" />
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input v-model="form.mobile" placeholder="电话" />
            </el-form-item>
            <el-form-item prop="company">
              <el-input v-model="form.company" placeholder="公司" />
            </el-form-item>
            <el-form-item prop="email">
              <el-input v-model="form.email" placeholder="邮箱" />
            </el-form-item>
            <el-form-item prop="content">
              <el-input v-model="form.content" placeholder="内容" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item class="text-center">
              <span class="leave-message-button" @click="onSubmit">提交留言</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-contactus-second">
      <div class="second-wrap">
        <div class="contactus-second-text">
          <div class="contactus-title">我要留言</div>
          <div class="contactus-en-title">Make a comment</div>
        </div>
        <div class="aboutus-second-content">
          <el-form ref="infoForm" label-width="0" :model="form" :rules="rules">
            <el-form-item prop="name">
              <el-input v-model="form.name" placeholder="姓名" />
            </el-form-item>
            <el-form-item prop="mobile">
              <el-input v-model="form.mobile" placeholder="电话" />
            </el-form-item>
            <el-form-item prop="company">
              <el-input v-model="form.company" placeholder="公司" />
            </el-form-item>
            <el-form-item prop="email">
              <el-input v-model="form.email" placeholder="邮箱" />
            </el-form-item>
            <el-form-item prop="content">
              <el-input v-model="form.content" placeholder="内容" type="textarea" :rows="4" />
            </el-form-item>
            <el-form-item class="text-center">
              <span class="leave-message-button" @click="onSubmit">提交留言</span>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    // 手机号验证
    const validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error('请输入正确的手机号'))
        } else {
          callback()
        }
      }
    }
    return {
      form: {
        name: '',
        mobile: '',
        company: '',
        email: '',
        content: ''
      },
      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱', trigger: 'blur' }
          ]
        }
    }
  },
  watch: {
    'form.mobile': function(curVal, oldVal) {
      if (!curVal) {
        this.form.mobile = ''
        return false
      }
      // 实时把非数字的输入过滤掉
      this.form.mobile = curVal.match(/\d/gi) ? curVal.match(/\d/gi).join('') : ''
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  methods: {
    onSubmit() {
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {})
            .then(() => {
                this.$message.success('留言已提交成功！')
              })
            .catch(() => {})
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/contactus/second.scss";
</style>